@charset "utf-8";
$blue:#3393df;
$green:#8bc01f;
$org:#ff6900;
.container-fluid {
    overflow-x: hidden;
    .nav_box {
        background-color: #222222;
        border: none;
    }
    .logo {
        padding: 7px 15px;
    }
    .navbar-default {
        .navbar-nav:first-of-type {
            li {
                a {
                    color: #9d9d9d;
                }
            }
            .active,
            li:hover {
                a {
                    background-color: #080808;
                    color: #ffffff;
                }
            }
        }
        .navbar-nav:last-of-type {
            li {
                a {
                    color: #9D9D9D;
                }
            }
        }
    }
    main{
        margin-top: 50px;
    }
    .banner_box {
        margin-top: 49px;
        .carousel-inner>.item>img {
            width: 100%;
        }
    }
    footer{
        background-color: #3b3b3b;
        padding: 20px 0 30px;
        .footer_main{
            color: #a1a3ab;
            .footer_nav{
                display: flex;
                a{
                    display: block;
                    color: #a1a3ab;
                    margin: 15px 10px;
                }
            }
        }
        .footer_connect_box{
            display: flex;
            justify-content: flex-end;
            margin-top: 15px;
            div{
                margin: 0 10px;
            }
            .connect_way{
                position: relative;
                cursor:pointer;
                &:hover{
                    .connect_way_code{
                        display: block;
                    }
                }
            }
            .connect_way_code{
                display: none;
                position: absolute;
                bottom: 100%;
                left: 36%;
                transform: translateX(-50%);
            }
        }
    }
}


@media only screen and (min-width:768px) and (max-width:991px) {
    .container-fluid {
        .navbar-nav>li>a {
            padding: 15px 4px;
        }
        
    }
}
@media only screen and (min-width:320px) and (max-width:767px) {
    
    footer{
            .footer_width{
                width: 90%;
                margin: 0 auto;
                .footer_connect_box{
                    justify-content: center;
                }
            }
            
        }
}
